<template>
    <div class="containers">
        <div class="btns">
            <a-select ref="select" v-model:value="selectedLanguage" style="width: 120px" @focus="focus"
                @change="handleChange">
                <a-select-option value="zh-CN">中文</a-select-option>
                <a-select-option value="es-ES">español</a-select-option>
            </a-select> 
            <a-button @click="printHandle">{{ selectedLanguage === 'zh-CN' ? '打印' : 'imprimir' }}</a-button>
        </div>
        <div class="head">
            <h1>KAIHANG TRADING CO..LIMITED</h1>
            <h1>义乌市开航贸易有限公司</h1>
            <h3>地址:浙江省义乌市福田街道中福广场1号楼35层</h3>
            <h3>购货合同</h3>
        </div>
        <div class="info">
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '供方名称' : 'Nombre del proveedor' }}：</span>
                <span>义乌市琪沐贸易有限公司(帝莱格)</span>
            </div>
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '合同编号' : 'Número de contrato' }}：</span>
                <span>S2027-24081302-SUP</span>
            </div>
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '联系电话' : 'Teléfono de contacto' }}：</span>
                <span>13757949593</span>
            </div>
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '签订日期' : 'Fecha de firma' }}：</span>
                <span>2024/8/13</span>
            </div>
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '供方地址' : 'Dirección del proveedor' }}：</span>
                <span>浙江省义乌市国际商贸城三区五楼2街68号门二街29378，29380三街29400</span>
            </div>
            <div>
                <span>{{ selectedLanguage === 'zh-CN' ? '传真号码' : 'Número de fax' }}：</span>
                <span></span>
            </div>
        </div>
        <div>{{ selectedLanguage === 'zh-CN' ? '根据《中华人民共和国民法典》规定，经供需双方协商一致，双方同意签订本合同，共同信守。' : `De acuerdo con las
            disposiciones del código civil de la república popular China, por consenso entre la oferta y la demanda,
            ambas partes acuerdan celebrar este contrato y cumplirlo conjuntamente.`}}</div>
        <div>{{ selectedLanguage === 'zh-CN' ?
            '备注：以下产品不要出现侵权有关的文字、图案、logo，否则一切损失由工厂承担！！！包装必须按照合同包装,内盒不得缺省,未经允许不得擅自更改内/外包装数量。' : `Observación: los
            siguientes productos no aparecen infracciones relacionadas con el texto, patrón, logotipo, de lo contrario,
            todas las pérdidas por la fábrica!!! El paquete debe embalarse de acuerdo con el contrato, la caja interna
            no debe ser defectuosa, y la cantidad de embalaje interno/externo no debe cambiarse sin permiso.`}}</div>
        <table>
            <thead>
                <th>El número</th>
                <th>Fotos de productos</th>
                <th>Empresa número de artículo</th>
                <th>El código de barras</th>
                <th>nombre</th>
                <th>español nombre</th>
                <th>Caja dividida no</th>
                <th>descripción</th>
                <th>embalaje</th>
                <th colspan="2">Cada caja</th>
                <th colspan="2">Número de cajas</th>
                <th colspan="2">El número de</th>
                <th>monovalente</th>
                <th>Precio total</th>
                <th>volumen</th>
                <th>comentar</th>
            </thead>
            <thead>
                <th>序号</th>
                <th>产品图片</th>
                <th>公司货号</th>
                <th>条码</th>
                <th>品名</th>
                <th>西文品名</th>
                <th>分箱号</th>
                <th>描述与特点</th>
                <th>产品包装</th>
                <th colspan="2">每外箱装</th>
                <th colspan="2">箱数</th>
                <th colspan="2">数量</th>
                <th>单价</th>
                <th>总价</th>
                <th>体积</th>
                <th>备注</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><img src="" alt=""></td>
                    <td>S2027-11</td>
                    <td>6002202700119</td>
                    <td>装饰画</td>
                    <td>Pintura decorativa</td>
                    <td></td>
                    <td>规格:L60*W80cm条码,，颜色:图片色材质:铝合金边框+普通玻璃+实物装置</td>
                    <td>配件粘贴画背:面贴一张公司条码,，气泡袋包装，外箱2正2侧唛，贴4面红色易碎标+木架</td>
                    <td>6</td>
                    <td>张</td>
                    <td>15</td>
                    <td>箱</td>
                    <td>90</td>
                    <td>张</td>
                    <td>￥125.00</td>
                    <td>￥11250.00</td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedLanguage: 'zh-CN',
        }
    },

    methods: {
        printHandle() {
            console.log('打印');

        }
    }
}
</script>

<style scoped>
.containers {
    width: 100%;
    font-family: "微软雅黑";
    position: relative;


}

.btns {
    position: absolute;
}

.head {
    text-align: center;
}

.info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info div {
    width: 40%;
    display: flex;
}

table {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;

}

table,
th,
td {
    padding: 3px;
    border: solid 1px #000;
}

th,
td {
    max-width: 100px;
    text-align: center;
}
</style>